<!--  SubForm 子表单展示模块 -->
<template>
  <div v-if="data.length > 0" class="subform">
    <div v-for="(it, index) in data" :key="index" class="phItems">
      <div
        v-if="it !== 'empty'"
        :class="{
          phItem: true
        }"
      >
        <!-- 这里是控件内容 后面可能要根据不同的控件类型进行处理 - start -->
        <div>
          <div class="tit">
            <span v-show="it.data.isMust" class="mast" style="color: #f00"
              >*</span
            >
            <span v-if="it.data.isShowTitle">
              {{ it.data.title || it.lab }}
            </span>
            &nbsp;
          </div>
          <div
            v-if="
              it.type !== 'rate' &&
              it.type !== 'switch' &&
              it.type !== 'slider' &&
              it.type !== 'file' &&
              it.type !== 'img' &&
              it.type !== 'dateArea' &&
              it.type !== 'subform'
            "
            class="lab"
          >
            {{
              typeof it.data.defaultValue === 'string' && it.data.defaultValue
                ? it.data.defaultValue
                : it.data.placeholder
            }}
          </div>
          <div v-if="it.data.isStatistics && it.type !== 'rate'" class="total">
            {{
              Number(it.data.defaultValue.length) ||
              Number(it.data.minLength) ||
              0
            }}/{{ Number(it.data.maxLength) || 0 }}
          </div>
          <!-- 评分卡片独有的展示形式 -->
          <div v-if="it.type === 'rate'" class="lab">
            <t-rate
              v-model="attributeset.data.defaultValue"
              disabled
              allowHalf
              size="20px"
            ></t-rate>
          </div>
          <!-- 开关独有的展示形式 -->
          <div v-if="it.type === 'switch'" class="lab">
            <t-switch
              v-model="attributeset.data.defaultValue"
              disabled
              size="20px"
            ></t-switch>
          </div>
        </div>
        <!-- 滑块独有的展示形式 -->
        <div v-if="it.type === 'slider'" class="lab">
          <t-slider
            v-model="attributeset.data.defaultValue"
            :step="attributeset.data.step"
            disabled
            size="small"
          />
        </div>
        <!-- 日期区间的展示形式 -->
        <div v-if="it.type === 'dateArea'" class="lab">
          <span
            v-if="
              Array.isArray(attributeset.data.defaultValue) &&
              attributeset.data.defaultValue.length >= 1
            "
            >{{ attributeset.data.defaultValue[0] }} -
            {{ attributeset.data.defaultValue[1] }}</span
          >
          <span v-else>请选择 - 请选择</span>
        </div>
        <!-- 附件和图片的展示形式 -->
        <div v-if="it.type === 'file' || it.type === 'img'" class="lab"></div>
        <!-- 子表单控件内容 -->
        <div
          v-if="it.type === 'subform'"
          class="subformlab"
          style="padding-top: 10px"
        >
          <SubForm :data="it.data.formData"></SubForm>
        </div>
        <!-- 这里是控件内容 后面可能要根据不同的控件类型进行处理 - end -->
      </div>
      <div v-if="it === 'empty'" class="phEmpty"></div>
    </div>
  </div>
  <div v-else class="lab">请选择子表关联表单</div>
</template>
<script setup lang="ts">
import { reactive, watch, ref } from 'vue'

const props = defineProps({
  data: Object
})

let attributeset = reactive({ ...props.arrtData })

// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])

// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)

// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../index.less" scoped></style>
<style lang="less" scoped></style>
